<!--
 * @Author: zhangjingyu
 * @Date: 2020-10-13 14:12:54
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-03-08 15:37:16
 * @FilePath: \vprisk-weifuwu\src\views\Main.vue
 * @Description: 
-->
<template>
  <el-container style="height: 100%">
    <el-aside width="200" style="overflow: hidden"><common-aside /></el-aside>
    <el-container class="container">
      <el-header><common-header /></el-header>
      <common-tab />
      <el-main>
        <!-- 缓存组件 -->
        <!-- <keep-alive> -->
        <router-view />
        <!-- </keep-alive> -->
      </el-main>
    </el-container>
    <v-tour name="myTour" :steps="steps" :options="myOptions" id="myTour"></v-tour>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader";
import CommonAside from "../components/CommonAside";
import CommonTab from "../components/CommonTab";
export default {
  components: {
    CommonHeader,
    CommonAside,
    CommonTab,
  },
  data() {
    return {
      myOptions: {
          useKeyboardNavigation: false,
          labels: {
            buttonSkip: '跳过引导',
            buttonPrevious: '上一步',
            buttonNext: '下一步',
            buttonStop: '关闭引导'
          }
        },
      steps: [
         {
          target: "#tourstep1", // We're using document.querySelector() under the hood
          header: {
            title: "菜单伸缩",
          },
          content: `点击此处可伸缩菜单`,
        },
        {
          target: "#tourstep2", // We're using document.querySelector() under the hood
          header: {
            title: "应用分类",
          },
          content: `点击应用分类可切换应用模块。`,
        },
      ],
    };
  },
  mounted() {
    document.body.className = "theme-" + 1;
    setTimeout(() => {
      this.$tours["myTour"].start();
      this.$tours["myTour"].callbacks.onFinish = ()=>{
        // 结束回调
        localStorage.setItem("tourShow","1")
      }
    }, 3000);
  },
  methods:{
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #f1f1f2;
  padding: 0;
  height: 63px;
}
.el-main {
  padding: 10px;
  border: 10px solid rgb(241, 241, 242);
  border-top: none;
  background-color: #fff;
}
.el-aside {
  background: linear-gradient(336deg, #485b7c 0%, #232e46 100%, #232e46 100%);
  
}
</style>
